import React,{useEffect,useState} from "react";
import { Text, View,StyleSheet,Image,TouchableHighlight,TouchableOpacity, Linking,ScrollView, Alert,TextInput,Platform } from "react-native";
import * as S from "../Home/styles";
import { Avatar, HStack, Center, NativeBaseProvider ,ChevronRightIcon,useToast,ArrowBackIcon} from "native-base";
import {launchImageLibrary,launchCamera} from 'react-native-image-picker';
import { /*RFValue*/ } from "react-native-responsive-fontsize";
import Icon from 'react-native-vector-icons/Ionicons';
import { useGlobal } from '../../utils/GlobalContext';
import { saveUeser,uploadImage } from "../../services/user";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { CommonActions } from '@react-navigation/native';
import WebView from 'react-native-webview';



const Title = ({navigation,route}:any)=>{
  return(
    <View style={styles.titleBox}>
      <TouchableOpacity
        style={styles.backBtn}
        onPress={() => {
          navigation.goBack()
        }}
      >
        <ArrowBackIcon size="5" />
      </TouchableOpacity>
      <Text style={styles.titlText}>{route.params.name}</Text>
    </View>
  )
}


const Webview = ({route,navigation}:any) => {
  return (
    <S.GrayContainer>
      <NativeBaseProvider>
       <View style={styles.container}>
          <Title navigation={navigation} route={route}/>
      
          <WebView style={{flex:1,}} source={{uri: route.params.path}}></WebView>
              
       </View>
      </NativeBaseProvider>
      
    </S.GrayContainer>
  );
};

export default Webview;
const styles = StyleSheet.create({
  container:{
    height:"100%",
    width:'100%',
    flex:1,
    // alignItems:'center',
    // paddingHorizontal:18,
  },
  titleBox:{
    width:'100%',
    position:'relative',
    alignItems:'center',
    height:40,
    justifyContent:"center",
    marginBottom:16,
  },
  backBtn:{
    position:'absolute',
    left:16,
    backgroundColor:'#fff',
    width:40,
    height:40,
    display:'flex',
    alignItems:'center',
    justifyContent:'center',
    borderRadius:100,
    
    shadowColor: Platform.OS === 'android' ? '' : 'rgba(0, 0, 0, 0.08)', // 阴影颜色
    shadowOffset: { width: 0, height: 2 }, // 阴影偏移
    shadowOpacity: 1, // 阴影不透明度
    shadowRadius: 8, // 阴影半径
    elevation: 3, // 阴影深度
  },
  titlText:{
    fontSize:16,
    fontWeight:'600',
    color:'#000000'
  },
  content:{},
  contentBox:{
    paddingHorizontal:16,
    backgroundColor:'#fff',
    borderRadius:16,
    marginBottom:16,
  },
  contentItem:{
    paddingVertical:14,
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center'
  },
  contentItemLine:{
    borderBottomWidth:1,
    borderColor:'#eee'
  },
  itemLeft:{
    fontSize:16,
    color:'#000000',
    fontWeight:'400',
  },
  itemRight:{
    fontSize:16,
    color:'#8E8E93',
    fontWeight:'400',
  },
  subBtn:{
    marginTop:20,
    width:'100%',
    backgroundColor:'#C6E0F7',
    borderRadius:16,
    height:50,
    alignItems:'center',
    justifyContent:'center'
  },
  subBtnText:{
    color:'#414F66',
    fontSize:14,
    fontWeight:'700'
  },
  input:{
    fontSize:16,
    height:"100%",
    margin:0,
    padding:0
  },

})
